<script setup>
const transitionName = ref("");
const keepAliveNames = ref([]);
const route = useRoute();

watch(
  () => route,
  (to, from) => {    
    const routerType = to.query.routerType;
    if (routerType === "push") {
      keepAliveNames.value.push(to.name);
    } else {
      keepAliveNames.value.pop();
    }
  },{ immediate: true, deep: true }
);
</script>

<template>
  <div id="app-box">
    <RouterView v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </RouterView>
  </div>
</template>

<style scoped lang="less">
#app-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: var(--var-bg-color);

 /* 路由切换动画 */
 .fade-leave-active,
  .fade-enter-active {
    transition: all 0.35s ease-in-out;
  }

  .fade-enter-from {
    opacity: 0;
    transform: scale(1.2);
  }

  .fade-enter-to {
    opacity: 1;
    transform: scaleZ(1);
  }

  .fade-leave-from {
    opacity: 1;
    transform: scaleZ(1);
  }

  .fade-leave-to {
    opacity: 0;
    transform: scale(1.2);
  }
}
</style>
